import React, {PureComponent} from 'react';
import {
	ScrollView,
	StyleSheet,
	View
} from 'react-native';
import CommonCell from './CommonMyCell';
import MineHeaderView from './MineHeaderView';
import MineMiddleView from './MineMiddleView';

/**
 * @FileName: Mine
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description:
 */
class Mine extends PureComponent {
	/**
	 * 导航器属性设置
	 */
	static navigationOptions = {
		title: 'Mine',
		// 设置标题居中
		headerTitleStyle: {
			flex: 1,
			textAlign: 'center'
		},
		// 隐藏导航
		header: null
	};
	
	render() {
		return (
			<ScrollView
				style={styles.container}
				contentInset={{top:-200}}
				contentOffset={{y: 200}}
			>
				{/*上方View*/}
				<MineHeaderView />
				{/*中部View*/}
				{this.renderCenterView()}
				{/*下方View*/}
				{this.renderBottomView()}
			</ScrollView>
		)
	}
	
	/**
	 * 渲染中间View
	 * @return {*}
	 */
	renderCenterView() {
		return(
			<View style={{marginTop: 20}}>
				<CommonCell
					leftIconName={'mine_collect'}
					leftTitle={'我的订单'}
					rightTitle={'查看全部订单'}
				/>
				<MineMiddleView/>
			</View>
		)
	}
	
	/**
	 * 渲染下方View
	 */
	renderBottomView() {
		return (
			<View>
				<View style={{marginTop: 20}}>
					{/* 图片mine_wallet  mine_voucher mine_point_mall mine_recommendation mine_cooperation*/}
					<CommonCell
						leftIconName={'mine_wallet'}
						leftTitle={'小雨钱包'}
						rightTitle={'账户余额：$100'}
					/>
					<CommonCell
						leftIconName={'mine_voucher'}
						leftTitle={'抵用券'}
						rightTitle={'1000'}
					/>
				</View>
				
				<View style={{marginTop: 20}}>
					<CommonCell
						leftIconName={'mine_point_mall'}
						leftTitle={'积分商城'}
					/>
				</View>
				<View style={{marginTop: 20}}>
					<CommonCell
						leftIconName={'mine_recommendation'}
						leftTitle={'今日推荐'}
						rightIconName={'mine_new'}
					/>
				</View>
				<View style={{marginTop: 20}}>
					<CommonCell
						leftIconName={'mine_cooperation'}
						leftTitle={'我要合作'}
						rightTitle={'轻松开店，招财进宝'}
					/>
				</View>
			</View>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#E8E8E8'
	}
});

/**
 * 导出当前Module
 */
module.exports = Mine;